<template>
  <div>
    <!--1视图-->
    <input v-model="hobby" type="checkbox" value="抽烟">抽烟
    <input v-model="hobby" type="checkbox"  value="喝酒">喝酒
    <input v-model="hobby" type="checkbox"  value="烫头">烫头<br>
    你选择的：{{hobby}}<br>
    <button @click="change">点击切换</button><br>
    <span v-if="falg">
      你好，Vue
    </span>
    <span v-if="!falg">
      你好，张三
    </span>
  </div>

</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      //2属性定义
      hobby:[],
      falg:true
    }
  }, methods: {
    //3自定义方法
    change(){
      this.falg=!this.falg;
    }
  }, created() {
    //4.钩子函数
    console.log("2.created");
  },beforeCreate() {
    console.log("1.beforeCreate");
  },beforeMount() {
    console.log("3.beforeMount");
  },mounted() {
    console.log("4.mounted");
  }
}
</script>

<style scoped>

</style>